<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-row :gutter="10" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-lx-people grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ chicangCount }}</div>
                  <div>持仓个数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-lx-notice grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-lx-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">5000</div>
                  <div>数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 500px">
          <div slot="header" class="clearfix">
            <span>持仓股票</span>
          </div>
          <YYTable :responseData="tableData" :responseKeys="sourceKey" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import YYTable from "../YYChart/YYTable.vue";
import json_data from "../Utils/api.js";
import { hybrid } from "../Utils/SQLManager.js";

let { localData } = json_data();
hybrid();
export default {
  name: "dashboard",
  data() {
    return {
      sourceKey: [],
      tableData: [],
      chicangCount: 0,
      name: localStorage.getItem("ms_username"),
    };
  },
  components: {
    YYTable,
  },
  beforeMount() {
    let sourceKey = [
      "name",
      "ts_code",
      "hy",
      "open",
      "close",
      "percent",
      "huanshou",
      "ma5",
    ];
    this.sourceKey = sourceKey;
    this.tableData = localData["rps5_table"].slice(0, 4);
    this.chicangCount = this.tableData.length;
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  // created() {
  //     this.handleListener();
  //     this.changeDate();
  // },
  // activated() {
  //     this.handleListener();
  // },
  // deactivated() {
  //     window.removeEventListener('resize', this.renderChart);
  //     bus.$off('collapse', this.handleBus);
  // },
  methods: {
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      });
    },
    // handleListener() {
    //     bus.$on('collapse', this.handleBus);
    //     // 调用renderChart方法对图表进行重新渲染
    //     window.addEventListener('resize', this.renderChart);
    // },
    // handleBus(msg) {
    //     setTimeout(() => {
    //         this.renderChart();
    //     }, 200);
    // },
    // renderChart() {
    //     this.$refs.bar.renderChart();
    //     this.$refs.line.renderChart();
    // }
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-4 .grid-con-icon {
  color: rgb(104, 71, 65);
}

.grid-con-4 .grid-num {
  color: rgb(45, 140, 240);
}
/* 
.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
} */
/* 
.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
} */

/* .user-info-list span {
    margin-left: 70px;
} */

.mgb20 {
  margin-bottom: 20px;
}
/* 
.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
} */

.schart {
  width: 100%;
  height: 300px;
}
</style>
